<template>
  <!-- 用户注册组件 -->
  <div class="userLoginContentR">
    <!-- 这里阻止了表单的默认行为（防止表单提交，并且执行函数） -->
    <form @submit.prevent="getUserRegisterData($event)" method="post">
      <div class="form-group">
        <label for="user">用户名</label>
        <input type="text" class="form-control" id="user" placeholder="Username">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="Email">
      </div>
     <div class="d-flex justify-content-between">
        <button type="submit" class="btn btn-secondary">提交</button>
     </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'UserLoginContentR',
    data () {
      return {
        user: false
      }
    },
    methods: {
      // 获取表单内的输入内容
       getUserRegisterData(event) {
        let userObj = {
          uname: event.target[0].value,
          upass: event.target[1].value,
          email: event.target[2].value,
          table: 'user'
        }
        // 判断用户是否输入
        // console.log(userObj);
        if (userObj.uname && userObj.upass && userObj.email) {
          this.user = true;
        } else {
          alert('请输入用户名，密码或邮箱');
        }

        if (this.user) {
          // 发送异步用户注册请求
          this.$store.dispatch('asynGetUserR', userObj);
          this.user = false;
          
          setTimeout(() => {
            if (this.$store.state.userUpLoad === 'success') {
              // 注册成功跳转登录界面
              window.location.hash = '/userLogin/userLoginContentL';
            } else {
              alert('用户名已被注册');
              window.location.reload();
            }
          }, 500);
        }
      }
    },
  }

</script>

<style scoped>

</style>